<!DOCTYPE html>
<html>
<head>
    <title>Optical System Diagram</title>
</head>
<body>
<canvas id="physicsCanvas" width="600" height="350"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Style and settings
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2;
    ctx.font = 'bold 18px sans-serif';
    ctx.textAlign = 'center';

    // Coordinates and scale
    const axisY = 150;
    const scale = 20; // pixels per cm

    // Horizontal positions based on scale
    const objectX = 120;
    const lens1X = objectX + 10 * scale; // 120 + 200 = 320
    const lens2X = lens1X + 5 * scale;  // 320 + 100 = 420

    // Dimensions of elements
    const objectHeight = 40;
    const lensHeight = 100;
    const lensTopY = axisY - lensHeight / 2;
    const lensBottomY = axisY + lensHeight / 2;

    // Helper function to draw an arrow line (for object)
    function drawUpArrow(ctx, x, y_base, height) {
        const headlen = 10;
        const tox = x;
        const toy = y_base - height;
        const fromx = x;
        const fromy = y_base;

        const angle = Math.atan2(toy - fromy, tox - fromx);
        ctx.beginPath();
        ctx.moveTo(fromx, fromy);
        ctx.lineTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
        ctx.stroke();
    }

    // Helper for dimension lines with double arrows
    function drawDimLine(ctx, x1, x2, y) {
        ctx.beginPath();
        // Horizontal line
        ctx.moveTo(x1, y);
        ctx.lineTo(x2, y);
        ctx.stroke();

        const headlen = 8;
        // Arrow head at x2
        ctx.beginPath();
        ctx.moveTo(x2, y);
        ctx.lineTo(x2 - headlen, y - 4);
        ctx.moveTo(x2, y);
        ctx.lineTo(x2 - headlen, y + 4);
        ctx.stroke();

        // Arrow head at x1
        ctx.beginPath();
        ctx.moveTo(x1, y);
        ctx.lineTo(x1 + headlen, y - 4);
        ctx.moveTo(x1, y);
        ctx.lineTo(x1 + headlen, y + 4);
        ctx.stroke();
    }
    
    // 1. Draw Principal Axis
    ctx.beginPath();
    ctx.moveTo(0, axisY);
    ctx.lineTo(canvas.width, axisY);
    ctx.stroke();

    // 2. Draw Object
    drawUpArrow(ctx, objectX, axisY, objectHeight);

    // 3. Draw Converging Lens (Lens 1)
    const lens1CurveWidth = 25;

    // Arcs
    ctx.beginPath();
    ctx.moveTo(lens1X, lensTopY);
    ctx.quadraticCurveTo(lens1X + lens1CurveWidth, axisY, lens1X, lensBottomY);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(lens1X, lensTopY);
    ctx.quadraticCurveTo(lens1X - lens1CurveWidth, axisY, lens1X, lensBottomY);
    ctx.stroke();
    
    // Centerline for lens
    ctx.beginPath();
    ctx.moveTo(lens1X, lensTopY);
    ctx.lineTo(lens1X, lensBottomY);
    ctx.stroke();

    // 4. Draw Diverging Lens (Lens 2)
    const lens2ArcSep = 4; // half separation of the two arcs
    const lens2CurveDepth = 15;
    
    // Left arc `)`
    ctx.beginPath();
    ctx.moveTo(lens2X - lens2ArcSep, lensTopY);
    ctx.quadraticCurveTo(lens2X - lens2ArcSep + lens2CurveDepth, axisY, lens2X - lens2ArcSep, lensBottomY);
    ctx.stroke();
    
    // Right arc `(`
    ctx.beginPath();
    ctx.moveTo(lens2X + lens2ArcSep, lensTopY);
    ctx.quadraticCurveTo(lens2X + lens2ArcSep - lens2CurveDepth, axisY, lens2X + lens2ArcSep, lensBottomY);
    ctx.stroke();

    // Vertical tick on axis for Lens 2 (representing center)
    ctx.beginPath();
    ctx.moveTo(lens2X, axisY - 5);
    ctx.lineTo(lens2X, axisY + 5);
    ctx.stroke();
    
    // 5. Draw Dimension Lines
    const dimY_10cm = axisY + 70;
    const dimY_5cm = axisY + 45;

    // Vertical Ticks
    ctx.beginPath();
    ctx.moveTo(objectX, axisY); ctx.lineTo(objectX, dimY_10cm);
    ctx.moveTo(lens1X, axisY); ctx.lineTo(lens1X, dimY_10cm); 
    ctx.moveTo(lens2X, axisY); ctx.lineTo(lens2X, dimY_5cm);
    ctx.stroke();
    
    // Dimension Line and Label for 10 cm
    drawDimLine(ctx, objectX, lens1X, dimY_10cm);
    ctx.textBaseline = 'middle';
    ctx.fillText('10 cm', (objectX + lens1X) / 2, dimY_10cm - 12);
    
    // Dimension Line and Label for 5 cm
    drawDimLine(ctx, lens1X, lens2X, dimY_5cm);
    ctx.fillText('5 cm', (lens1X + lens2X) / 2, dimY_5cm - 12);

    // 6. Labels for focal lengths
    const labelY = lensTopY - 10;
    ctx.textBaseline = 'bottom';
    
    // f1 label
    let currentX = lens1X - 60;
    ctx.textAlign = 'left';
    ctx.font = 'italic bold 20px serif';
    ctx.fillText('f', currentX, labelY);
    currentX += ctx.measureText('f').width - 3;
    ctx.font = 'bold 15px serif';
    ctx.fillText('1', currentX, labelY + 2);
    currentX += ctx.measureText('1').width + 2;
    ctx.font = 'bold 20px sans-serif';
    ctx.fillText('= 10 cm', currentX, labelY);

    // f2 label
    currentX = lens2X + 20;
    ctx.font = 'italic bold 20px serif';
    ctx.fillText('f', currentX, labelY);
    currentX += ctx.measureText('f').width - 3;
    ctx.font = 'bold 15px serif';
    ctx.fillText('2', currentX, labelY + 2);
    currentX += ctx.measureText('2').width + 2;
    ctx.font = 'bold 20px sans-serif';
    ctx.fillText('= -15 cm', currentX, labelY);

    // 7. Figure Caption
    ctx.textAlign = 'center';
    ctx.font = 'bold 20px serif';
    ctx.fillText('Fig. 1.27', canvas.width / 2, canvas.height - 15);

</script>
</body>
</html>